<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>医学标本展览馆</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- 顶部通栏 -->
    <header class="header">
      <div class="container header-content">
        <div class="logo">
          <img
            src="https://via.placeholder.com/200x60/5a8dee/ffffff?text=医学标本展览馆"
            alt="医学标本展览馆"
            height="40"
          />
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 轮播图区域 -->
      <section class="carousel-section">
        <div class="carousel">
          <div class="carousel-item active">
            <img
              src="https://via.placeholder.com/1200x400/5a8dee/ffffff?text=人体解剖展览"
              alt="人体解剖展览"
            />
          </div>
          <div class="carousel-item">
            <img
              src="https://via.placeholder.com/1200x400/4caf50/ffffff?text=病理标本展览"
              alt="病理标本展览"
            />
          </div>
          <div class="carousel-item">
            <img
              src="https://via.placeholder.com/1200x400/5a8dee/ffffff?text=3D解剖展览"
              alt="3D解剖展览"
            />
          </div>
        </div>
      </section>

      <!-- 快速入口 -->
      <section class="quick-access">
        <div class="container">
          <div class="quick-access-grid">
            <a href="#" class="quick-access-item">
              <span class="material-icons">new_releases</span>
              <span>最新展览</span>
            </a>
            <a href="#" class="quick-access-item">
              <span class="material-icons">science</span>
              <span>人体奥秘</span>
            </a>
            <a href="#" class="quick-access-item">
              <span class="material-icons">biotech</span>
              <span>病理标本</span>
            </a>
            <a href="#" class="quick-access-item">
              <span class="material-icons">view_in_ar</span>
              <span>3D解剖</span>
            </a>
          </div>
        </div>
      </section>

      <!-- 资讯卡片 -->
      <section class="news-section">
        <div class="container">
          <div class="news-scroll">
            <div class="news-card">
              <h3>医学史特展：从古至今的医学发展</h3>
              <p>探索医学发展的历史长河，见证人类智慧的结晶</p>
              <span class="material-icons">arrow_forward</span>
            </div>
            <div class="news-card">
              <h3>现代医学影像技术展</h3>
              <p>了解最新的医学影像技术，感受科技的力量</p>
              <span class="material-icons">arrow_forward</span>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部导航栏 -->
    <nav class="nav-bar">
      <a href="index.html" class="nav-item active">
        <span class="material-icons">home</span>
        <span>首页</span>
      </a>
      <a href="exhibition.html" class="nav-item">
        <span class="material-icons">museum</span>
        <span>展览</span>
      </a>
      <a href="booking.html" class="nav-item">
        <span class="material-icons">event</span>
        <span>预约</span>
      </a>
      <a href="profile.html" class="nav-item">
        <span class="material-icons">person</span>
        <span>我的</span>
      </a>
    </nav>

    <style>
      /* 顶部通栏样式 */
      .header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: var(--spacing-md) 0;
        box-shadow: var(--card-shadow);
      }

      .header-content {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* 轮播图样式 */
      .carousel-section {
        margin: var(--spacing-lg) 0;
      }

      .carousel {
        height: 180px;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .carousel-item {
        height: 100%;
      }

      .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* 快速入口样式 */
      .quick-access {
        padding: var(--spacing-lg) 0;
      }

      .quick-access-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
      }

      .quick-access-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--text-primary);
        transition: transform 0.3s ease;
      }

      .quick-access-item:hover {
        transform: translateY(-4px);
      }

      .quick-access-item .material-icons {
        font-size: 48px;
        margin-bottom: var(--spacing-sm);
        color: var(--primary-color);
      }

      /* 资讯卡片样式 */
      .news-section {
        padding: var(--spacing-lg) 0;
      }

      .news-scroll {
        display: flex;
        gap: var(--spacing-md);
        overflow-x: auto;
        padding: var(--spacing-sm) 0;
        scrollbar-width: none;
      }

      .news-scroll::-webkit-scrollbar {
        display: none;
      }

      .news-card {
        flex: 0 0 70%;
        padding: var(--spacing-md);
        background: white;
        border-radius: var(--border-radius-md);
        box-shadow: var(--card-shadow);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
      }

      .news-card h3 {
        font-size: 16px;
        margin-bottom: var(--spacing-xs);
      }

      .news-card p {
        font-size: 14px;
        color: var(--text-secondary);
      }

      .news-card .material-icons {
        color: var(--primary-color);
      }

      /* 底部导航样式 */
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--text-secondary);
        font-size: 12px;
        transition: all 0.3s ease;
      }

      .nav-item.active {
        color: var(--primary-color);
      }

      .nav-item .material-icons {
        font-size: 24px;
        margin-bottom: 2px;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .quick-access-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .news-card {
          flex: 0 0 85%;
        }
      }
    </style>
  </body>
</html>
